<template>
    <div class="letter-roll-container">
        <div class="letter-roll-box" v-for="(item,i) in list" :data-w="blist[i]">{{item}}</div>
    </div>
</template>

<script>

export default {
    name: "LetterRoll",
    props: ["letters", "bletters"],
    data() {
        return {
            list: ["H", "O", "V", "E", "R"],
            blist: ["W", "O", "R", "L", "D"]
        }
    },
    computed: {},
    methods: {
    },
    created() {
        if (this.$props.letters) {
            this.list = this.$props.letters;
        }
        if (this.$props.bletters) {
            this.blist = this.$props.bletters;
        }
    },
    mounted() {
        
    }
}
</script>

<style scoped>
.letter-roll-container {
    display: flex;
    font-family: sans-serif;
}

.letter-roll-box {
    width: 35px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    transition: 0.8s;
    cursor: pointer;
    position: relative;
    background-color: rgb(58, 165, 255);
    overflow: hidden;
}

.letter-roll-box::before {
    position: absolute;
    top: 0;
    background-color: #0f0f0f;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 0.4s;
}

.letter-roll-box:nth-child(1)::before {
    content: attr(data-w);
}

.letter-roll-box:nth-child(2)::before {
    transform: translateY(-100%);
    content: attr(data-w);
}

.letter-roll-box:nth-child(3)::before {
    content: attr(data-w);
}

.letter-roll-box:nth-child(4)::before {
    transform: translateY(-100%);
    content: attr(data-w);
}

.letter-roll-box:nth-child(5)::before {
    content: attr(data-w);
}

.letter-roll-container:hover>.letter-roll-box::before {
    transform: translateY(0);
}
</style>